<template>
  <div>
    <el-form ref="form" :model="form" :inline="true" style="text-align: left;">
      <el-form-item>
        <el-input v-model="form.filter.kwd" style="float: left;" placeholder="请输入环节类型名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="float: left;" @click.native="onSubmit"><i class="el-icon-search"></i>查询
        </el-button>
        <el-button v-if="$utils.ckUIPower('S01010101')" @click="openEditDialog" style="float: left;"><i
          class="el-icon-plus"></i>新增
        </el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table stripe
                v-loading="loading"
                element-loading-text="数据加载中"
                :data="list"
                style="width:100%"
                @sort-change="onSubmit"
                border>
        <el-table-column
          inline-template
          fixed
          label="序号"
          width="100"
          align="center">
          <span>{{$index + 1}}</span>
        </el-table-column>

        <el-table-column property="name" sortable="custom" label="环节类型名称" width="200"
                         align="center"
                         inline-template>
          <template>
            <span :class="'lvl_'+(row.lvl+1)">
            </span>
            {{row.name}}
          </template>
        </el-table-column>
        <el-table-column label="是否涉及容器" property="hasContainer" sortable="custom" width="190" inline-template
                         align="center">
          <span style="white-space:nowrap;">
            {{row.hasContainer == 1 ? '是' : '否'}}
          </span>
        </el-table-column>
        <el-table-column
          property="remark"
          sortable="custom"
          label="说明描述"
          align="center"
          width="520">
        </el-table-column>
        <el-table-column
          inline-template
          label="操作"
          fixed="right"
          align="center"
          v-if="$utils.ckUIPower('S01010101')"
          width="160">
          <template>
            <el-button type="text" @click.native="openEditDialog(row.id)">修改</el-button>
            <el-popover  ref="popover_" placement="top">
              <p><i class="el-alert__icon el-icon-warning red"></i>确定要删除此数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="primary" size="mini" @click.native.prevent="deleteLinkType(row.id);">确定
                </el-button>
              </div>
            </el-popover>
            <el-button type="text" v-popover:popover_>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--弹出框-->
    <account-add-dialog v-bind:dialog-form-visible="dialogData.show" v-bind:id="id"
                        v-on:closeDialog="closeDialog"></account-add-dialog>
  </div>
</template>
<script>
  import AccountAddDialog from './add.dialog.vue'
  import http from '../../../api/http'

  export default {
    data() {
      return {
        loading: true,
        form: {
          filter: {kwd: ''},
        },
        active: ["禁用", "启用"],
        id: null,
        dialogData: {show: false},
        list: []
      }
    },
    computed: {},
    methods: {
      deleteLinkType(id) {
        var vm = this;
        http.postData(vm, "/pt/linkType/del/" + id, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type: 'error', message: ret.msg});
          }
        });
      },
      onSubmit(sortCol) {
        var vm = this;
        if (sortCol && sortCol.prop != undefined && sortCol.prop != '' && sortCol.prop != 'undefined') {
          var sortJson = '{"' + sortCol.prop + '":"' + (sortCol.order == 'descending' ? 'desc' : 'asc') + '"}';
          console.log(sortJson);
          vm.form.filter.sort = JSON.parse(sortJson);
          vm.form.pageNo = 1;
        }
        vm.loading = true;
        http.postData(vm, "/pt/linkType/list", {
          json: JSON.stringify(vm.form.filter),
          pageNo: vm.form.pageNo,
          pageSize: vm.form.pageSize
        }, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.list = ret.value;
          }
          vm.loading = false;
        });
      },
      openEditDialog(id_) {
        this.dialogData.show = true;
        if (id_ != undefined && typeof id_ == "string") {
          this.id = id_;
        } else {
          this.id = '';
        }
      },
      //  加载详细数据
      loadData() {
        var vm = this;
        if (this.id != undefined && this.id != '') {
          http.postData(vm, "/pt/linkType/detail/" + this.id, {}, function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              vm.form = ret.value;
            } else {
              vm.$notify.error({title: '操作失败', message: ret.msg});
            }
          });
        }
      },      closeDialog() {
        this.dialogData.show = false;
      },
      deleteLinkType(id) {
        var vm = this;
        http.postData(vm, "/pt/linkType/del/" + id, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type: 'error', message: ret.msg});
          }
        });
      },
      handleSizeChange() {
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange(val) {
        this.form.pageNo = val
        this.onSubmit();
      }
    },
    components: {
      AccountAddDialog
    },
    created() {
      this.onSubmit();
    }
  }

</script>
<style>
</style>
